<template>
    <div>
        <div class="banner" @click="handleBannerClick" >
            <img  class="banner-img" :src="bannerImg" >
            <div class="banner-info">
                <div class="banner-title">{{this.sightName}}</div>
                <div class="banner-number">{{this.bannerImgs.length}}</div>
            </div>
        </div>
        <FadeAnimation>
            <Gallary @close="handleGallaryClose"  :imgs="bannerImgs" v-show="showGallary"></Gallary>
        </FadeAnimation>
    </div>
</template>

<script>
    import Gallary from "../common/Gallary";
    import FadeAnimation from "../common/FadeAnimation";
    export default {
        name: "DetailBanner",
        data(){
            return{
                showGallary:false,
            }
        },
        props: {
            sightName: String,
            bannerImg: String,
            bannerImgs: Array
        },
        components: {
            FadeAnimation,
            Gallary,
        },
        methods:{
            handleBannerClick: function(){
                this.showGallary=true
            },
            handleGallaryClose: function(){
                this.showGallary=false
            },
        },
        watch:{
            showGallary(){
                console.log("showGallaryChange to" +this.showGallary)
            },
        }
    }
</script>

<style lang="stylus" scoped>
    .banner
        overflow :hidden
        position :relative
        height :0
        padding-bottom :55%
        touch-action :none
        .banner-img
            width :100%
        .banner-info
            display :flex
            line-height :.6rem
            position :absolute
            right :0
            left :0
            bottom :0
            color :#fff
            background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
            .banner-title
                flex :1
                padding :0 .2rem
                font-size :.32rem
                margin-top:.28rem
            .banner-number
                height :.32rem
                line-height :.32rem
                margin-top :.14rem
                padding :.2rem
                border-radius :.2rem
                background: rgba(0, 0, 0, .5)
                .banner-icon
                    font-size: .24rem


</style>
